<!--
  折叠动画2（收起展开按钮在尾部,仅针对文本有效！！！！）：       zls-2021/06/07
      Attributes
          1、text           显示内容（必填，默认为''）
          2、row            第几行显示展开收起（默认为4）
          3、color          字体颜色
          4、downText       收起的文本（默认为'收起'）
          5、upText         展开的文本（默认为'展开'）

      Demo==>
          <z-foldText
            :text="'近数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了数据真的是太多了'"
          ></z-foldText>
-->
<template>
  <div class="z-foldText" :style="{ color: props.color }">
    <span id="z-foldText-content"> {{ text }}</span>
  </div>
</template>

<script>
export default { name: 'z-foldText' }
</script>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  row: {
    type: Number,
    default: 4
  },
  color: {
    type: String,
    default: '#666'
  },
  downText: {
    type: String,
    default: '收起'
  },
  upText: {
    type: String,
    default: '展开'
  }
})
const zfoldTextContent = ref(null)
const originalText = ref('') // 源数据存储变量
const changeText = ref('') // 计算数据变量

onMounted(() => {
  init()
})

onUnmounted(() => {
  window.removeEventListener('click', clickListener)
})

function init() {
  zfoldTextContent.value = document.getElementById('z-foldText-content')
  changeText.value = originalText.value = zfoldTextContent.value.innerHTML
  let h = getLength(zfoldTextContent.value.getClientRects())
  while (h > props.row) {
    changeText.value = changeText.value.slice(0, -1)
    zfoldTextContent.value.innerHTML = changeText.value + `<span>...</span><span id="collapse-btn" data-spread="false" style="color:#0b959a"> ${props.upText}</span>`
    h = getLength(zfoldTextContent.value.getClientRects())
  }
  window.addEventListener('click', clickListener)
}

// 监听函数
function clickListener(e) {
  if (e.target.id !== 'collapse-btn') return
  if (e.target.dataset.spread === 'false') {
    zfoldTextContent.value.innerHTML = originalText.value + `<span id="collapse-btn" data-spread="true" style="color:#0b959a;margin-left:8px;">${props.downText}</span>`
  } else {
    zfoldTextContent.value.innerHTML = changeText.value + `<span>...</span><span id="collapse-btn" data-spread="false" style="color:#0b959a">${props.upText}</span>`
  }
}

// 动态计算文本行数
function getLength(rects) {
  let line = 0,
    lastBottom = 0
  for (let i = 0, len = rects.length; i < len; i++) {
    if (rects[i].bottom !== lastBottom) {
      lastBottom = rects[i].bottom
      line++
    }
  }
  return line
}
</script>

<style lang="scss" scoped>
.z-foldText {
  word-break: break-word;
  line-height: 20px;
  letter-spacing: 1px;
}
</style>
